<template>
    <div class="nav">
        <div>
            <img :src="imgtu[0]" alt="">
        </div>
            <div class="sw-warpper1">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="item of swiper" :key="item.id">
                        <h5>{{item. h5}}</h5>
                        <img class="swiper-img" :src="item.img" />
                        <P v-html="item.p"></P>
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
            <p class="na-p">持续优化在线教育，把在线教育的各项优势发挥的淋漓尽致</p>
            <a href="">体验职业考试“黑科技”</a>
        </div>
</template>
<script>
// var myVue;
export default {
  name: "swipe",
  data() {
    return {
      swiperOption: {
        slidesPerView: 2,
        centeredSlides: true,
        slidesOffsetBefore: 2,
        autoplay: {
          enabled: true,
          disableOnInteraction: false,
          delay: 2000
        },
        on: {
          transitionStart: () => {
            //方法有不详的bug有待解决
            // let swiper1 = this.swiper1;
            // if (swiper1) {
            //   swiper1 = this.swiper1.realIndex;
            //   this.swiper.forEach((item, inde) => {
            //     item.img = `./static/images/sre4-${inde + 1}.png`;
            //     if (swiper1 == inde) {
            //       item.img = `./static/images/sre4-${swiper1 + 1}hov.png`;
            //       console.log(item.img);
            //     }
            //   });
            // }
            //在试试一种方法
            let swiper1 = this.swiper1;
            if (swiper1) {
              //   console.log($(swiper1.slides[0]));
              for (var i = 0; i < swiper1.slides.length; i++) {
                var src = $(swiper1.slides[i])
                  .children(".swiper-img")
                  .attr("src");
                if (
                  $(swiper1.slides[i])
                    .attr("class")
                    .indexOf("swiper-slide-active") > -1
                ) {
                  if (src.indexOf("hov") == -1) {
                    src = src.split(".png")[0];
                    $(swiper1.slides[i])
                      .children(".swiper-img")
                      .attr("src", src + "hov.png");
                  }
                } else {
                  if (src.indexOf("hov") > -1) {
                    src = src.split("hov.png")[0];
                    $(swiper1.slides[i])
                      .children(".swiper-img")
                      .attr("src", src + ".png");
                  }
                }
              }
            }
          }
          //第二种方法
          // transitionStart: function() {
          //     console.log(myVue);
          // }
        },
        speed: 1000,
        loop: true
      },
      imgtu: ["/static/images/sre4-top.png"],
      swiper: [
        {
          id: 1,
          img: "/static/images/sre4-1hov.png",
          h5: "在线视频",
          p: "可互动可随时提问<br/>还有快速更新的直播课程"
        },
        {
          id: 2,
          img: "/static/images/sre4-2.png",
          h5: "支持多个终端",
          p: "减免设备限制的烦恼<br/>不受时间和地点的影响"
        },
        {
          id: 3,
          img: "/static/images/sre4-3.png",
          h5: "1对1班主任",
          p: "专属于你的贴心服务<br/>快速高效解决疑难问题"
        },
        {
          id: 4,
          img: "/static/images/sre4-4.png",
          h5: "离线缓存",
          p: "缓存后无限次观看<br/>反复学习加深记忆"
        },
        {
          id: 5,
          img: "/static/images/sre4-5.png",
          h5: "考试管理",
          p: "考试倒计时及学习记录等<br/>根据时间安排学习进度"
        },
        {
          id: 6,
          img: "/static/images/sre4-6.png",
          h5: "中业题库",
          p: "历年真题及模拟试题<br/>专家解析快速巩固提高"
        },
        {
          id: 7,
          img: "/static/images/sre4-7.png",
          h5: "历年真题",
          p: "做题后即刻形成答卷分析<br/>多个科目真题全覆盖"
        },
        {
          id: 8,
          img: "/static/images/sre4-8.png",
          h5: "模拟考试",
          p: "16年经验累积出题<br/>考前预测，名家解析"
        },
        {
          id: 9,
          img: "/static/images/sre4-9.png",
          h5: "题型专练",
          p: "对难点考点划分专项<br/>智能算法不懂的反复练习"
        }
      ]
    };
  },
  computed: {
    swiper1() {
      return this.$refs.mySwiper.swiper;
    }
  }
  // beforeCreate() {
  //     myVue = this;
  // }
};
</script>
<style scoped>
.nav {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background: #f8f8f8;
}
.nav img {
  width: 60%;
}
.sw-warpper1 {
  background: url(/static/images/sre4-bg.png) no-repeat center center;
  background-size: 100%;
  width: 100%;
  height: 0;
  padding-bottom: 57.9%;
}
.sw-warpper1 h5 {
  font-size: 1.2rem;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}
.sw-warpper1 img {
  width: 32%;
}
.sw-warpper1 p {
  margin-top: 0.8rem;
  line-height: 1rem;
}
.swiper-slide-active h5 {
  color: #fff;
}
.swiper-slide-active p {
  color: #fff;
}
.nav .na-p {
  color: #333333;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.nav a {
  display: block;
  margin: 0 auto;
  margin-top: 2rem;
  width: 75%;
  height: 2.5rem;
  border: 1px solid #ff4848;
  border-radius: 20px;
  line-height: 2.5rem;
  text-align: center;
  color: #ff4848;
  font-size: 1rem;
}
</style>
